<template>
  <n-popover
    class="avatar-popover"
    :placement="appStore.isDeep ? 'bottom-end' : 'right-end'"
    trigger="hover"
    :show-arrow="false"
    raw
  >
    <template #trigger>
      <div v-if="appStore.isDeep" class="deep-wrap">
        <img class="h-38 w-38 cursor-pointer" :src="deepDefaultUser" />
      </div>
      <img v-else class="h-46 w-46 cursor-pointer" :src="lightDefaultUser" />
    </template>
    <div v-if="appStore.isDeep" class="deep-card">
      <div class="flex items-center gap-16 pb-16" style="border-bottom: 1px solid #2ba1ff66">
        <img class="h-52 w-52" :src="deepDefaultUser" />
        <div class="text-18 color-#FFFFFF font-500">{{ userStore.username }}</div>
      </div>
      <div class="mt-16 cursor-pointer text-14 color-#FFFFFF font-400" @click="authStore.logout">
        退出登录
      </div>
    </div>
    <div v-else class="light-card">
      <div class="flex items-center gap-16 pb-20" style="border-bottom: 1px solid #e7eaf0">
        <img class="h-52 w-52" :src="lightDefaultUser" />
        <div class="text-18 color-#140D35 font-500">{{ userStore.username }}</div>
      </div>
      <div class="mt-20 cursor-pointer text-14 color-#140D35 font-400" @click="authStore.logout">
        退出登录
      </div>
    </div>
  </n-popover>
</template>
<script setup lang="jsx">
import deepDefaultUser from '@/assets/images/deep-default-user.png'
import lightDefaultUser from '@/assets/images/light-default-user.png'
import { useAppStore, useUserStore, useAuthStore } from '@/store'
defineOptions({ name: 'Avatar' })
const appStore = useAppStore()
const userStore = useUserStore()
const authStore = useAuthStore()
</script>
<style lang="scss" scoped>
@mixin mask($size) {
  &::before {
    content: '';
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: url(@/assets/images/deep-avatar-mask.png) no-repeat;
    width: $size;
    height: $size;
    pointer-events: none;
  }
}
.deep-wrap {
  position: relative;
  height: 38px;
  width: 38px;
  cursor: pointer;
  @include mask(69px);
}
.light-card {
  width: 232px;
  height: 162px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 4px 12px 0px rgba(56, 48, 129, 0.12);
  border: 1px solid rgba(231, 234, 240, 0.5);
  padding: 20px 20px 30px;
  transform-origin: inherit;
  border-radius: 6px;
}
.deep-card {
  width: 268px;
  height: 163px;
  background: url(@/assets/images/deep-card-bg.png) no-repeat;
  box-sizing: border-box;
  padding: 30px 38px;
  transform-origin: inherit;
  transform: translateX(40px);
}
</style>
<style lang="scss">
.avatar-popover.n-popover {
  box-shadow: none !important;
}
</style>
